<template>
  <el-dialog
    append-to-body
    title="密码更改"
    center
    :visible.sync="isVisible"
    element-loading-text="请求中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0.5)"
    v-loading="loading"
    width="500px">
    <el-form
      status-icon
      label-width="100px"
      size="mini"
      ref="currForm"
      :model="currFormData"
      :rules="formRule"
      id="changepassword-form">
      <el-form-item label="原密码:" prop="oldPassword">
        <el-input
          @keyup.enter.native="submitForm"
          v-model="currFormData.oldPassword"
          type="password"
          show-password></el-input>
      </el-form-item>
      <el-form-item label="新密码:" prop="password">
        <el-input
          @keyup.enter.native="submitForm"
          v-model="currFormData.password"
          type="password"
          show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码:" prop="rePassword">
        <el-input
          @keyup.enter.native="submitForm"
          v-model="currFormData.rePassword"
          type="password"
          show-password></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="resetForm">重 置</el-button>
      <el-button type="primary" size="small" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
const formData = {
  oldPassword: '',
  password: '',
  rePassword: ''
}
export default {
  name: 'ChangePassword',
  mounted: function () {
    var $this = this
    this.bus.$on('ChangePasswordDialogShowBusCall', function () {
      $this.isVisible = true
      this.currFormData = Object.assign({}, formData)
      $this.$forceUpdate()
    })
  },
  data: function () {
    // 旧密码,新密码检查
    var validatePass = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('新密码不能少于6位'))
      } else {
        if (this.currFormData.password === this.currFormData.oldPassword) {
          callback(new Error('原密码,新密码不能一致'))
        }
        // if (this.currFormData.checkPass !== '') {
        //   this.$refs.currForm.validateField('checkPass')
        // }
        callback()
      }
    }
    // 确认新密码检查
    var validatePass2 = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('确认密码不能少于6位'))
      } else if (value !== this.currFormData.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      isVisible: false,
      currFormData: Object.assign({}, formData),
      formRule: {
        oldPassword: [
          {required: true, message: '请输入 旧密码'},
          {validator: validatePass, trigger: ['blur', 'change']}
        ],
        password: [
          {required: true, message: '请输入 新密码'},
          {validator: validatePass, trigger: ['blur', 'change']}
        ],
        rePassword: [
          {required: true, message: '请输入 确认密码'},
          {validator: validatePass2, trigger: ['blur', 'change']}
        ]
      }
    }
  },
  methods: {
    submitForm: function () {
      this.$refs.currForm.validate((valid) => {
        if (valid) {
          var $this = this
          $this.loading = true
          $this.MyRequest(this.ApiDoNameAuth+'User/changePassword', {
            oldPassword: $this.currFormData.oldPassword,
            password: $this.currFormData.password
          }, function (res) {
            $this.loading = false
            $this.tip('更改成功')
            $this.isVisible = false
            $this.$forceUpdate()
          }, function (res) {
            $this.loading = false
            // 通用错误
            if (typeof res.message === 'string') {
              $this.tip(res.message, 'error')
            } else {
              // 如果是指定字段错误
              var fieldKey = Object.keys(res.message)[0]
              $this.tip(res.message[fieldKey], 'error')
              $this.setErrorByField(fieldKey, res.message[fieldKey])
            }
          })
        } else {
          console.log('验证不通过')
          return false
        }
      })
    },
    // 重置表单
    resetForm () {
      this.$refs.currForm.resetFields()
    },
    // 设置错误信息,根据字段名
    setErrorByField: function (field, errorMessage) {
      var $this = this
      $this.$refs.currForm.$children.forEach(function (value, key) {
        if (value.prop === field) {
          value.validateState = 'error'
          value.validateMessage = errorMessage
        }
      })
    }
  }
}
</script>
<style>
.dialog-footer {
  font-size: 12px;
}

#changepassword-form .el-form-item__label {
  font-size: 12px;
}
</style>
